<template>
  <div>
    <div class="big_box">
      <div class="u1"><div class="top"></div></div>
      <div class="u2"><h2>后台业务管理系统</h2></div>
      <div class="u3">
        <el-input placeholder="请输入账号" prefix-icon="el-icon-user" v-model="username" class="username"> </el-input>
        <el-input placeholder="请输入密码" show-password prefix-icon="el-icon-lock" v-model="password" class="password" @keyup.native.enter="login"> </el-input>
        <el-button type="primary" class="login" @click="login()">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  created() {},
  mounted() {},
  methods: {
    login() {
      if (this.username === 'admin' && this.password === '123') {
        this.$message.success('验证通过')
        this.$router.push('/home')
      } else {
        this.$message.error('密码错误')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.big_box {
  position: relative;
  left: 50%;
  top: 100px;
  transform: translate(-50%);
  width: 350px;
  height: 420px;
  box-shadow: 0 0 10px #ccc;
  .u1 {
    .top {
      height: 10px;
      background-color: #199ed8;
    }
  }
  .u2 {
    margin-bottom: 20px;
    h2 {
      margin-top: 100px;
      color: #199ed8;
    }
  }
  .u3 {
    .username,
    .password {
      width: 300px;
      height: 50px !important;
    }
    .login {
      width: 300px;
      margin: 30px 25px 0;
    }
  }
}
</style>
